// 返回上一层
document.querySelector('.icon-fanhui').addEventListener('click',()=>{
  history.go(-1)
})

// 获取商品存入本地的id
const goodsId = localStorage.getItem('goodsInformation')

// 获取评论数
axios.get('/comment/total',{params:{goodsId}}).then(result=>{
  // console.log(result)
  const count = result.data.data.total
  document.querySelector('.comment_tab').innerHTML=`
  <ul>
    <li><a href="#" class="active" data-score="-1">全部(<i>${count.all}</i>)</a></li>
    <li><a href="#" data-score="10">好评(<i>${count.praise}</i>)</a></li>
    <li><a href="#" data-score="20">中评(<i>${count.review}</i>)</a></li>
    <li><a href="#" data-score="30">差评(<i>${count.negative}</i>)</a></li>
    <div class="tab_bottom_line"></div>
  </ul>
  `
})

// 染获取评价列表渲染
render(-1)

// 点击切换好评、中评、差评
document.querySelector('.comment_tab').addEventListener('click',(e)=>{
  // console.log(e.target.dataset.score)
  // 排他
  if(document.querySelector('.comment_tab .active'))document.querySelector('.comment_tab .active').classList.remove('active')
  e.target.classList.add('active')

  // 下划线平移
  document.querySelector('.tab_bottom_line').style.transform = `translateX(${e.target.offsetLeft+14}px)`

  // 重新点击结果渲染好、中、差
  render(e.target.dataset.score)
})





// 封装渲染获取评价列表渲染
async function render(count) {
    const result = await axios.get('/comment/list',{params:{
      scoreType:count,
      goodsId,
      page:1
    }})
    const list = result.data.data.list.data
    if(result.data.data.list.data.length === 0) {
      document.querySelector('.comment_none').style.display = 'block'
      document.querySelector('.comment_block').style.display = 'none'
    } else {
      document.querySelector('.comment_none').style.display = 'none'
      document.querySelector('.comment_block').style.display = 'block'
      document.querySelector('.comment_block').innerHTML = list.map(item=>{
        // console.log(item)
        let str =''
        if(item.score === 10) {
          str =` 
          <span class="iconfont icon-favorite-filling"></span>
          <span class="iconfont icon-favorite-filling"></span>
          <span class="iconfont icon-favorite-filling"></span>
          <span class="iconfont icon-favorite-filling"></span>
          <span class="iconfont icon-favorite-filling"></span>
          `
        } else if ( item.score === 20 ) {
          str =` 
          <span class="iconfont icon-favorite-filling"></span>
          <span class="iconfont icon-favorite-filling"></span>
          <span class="iconfont icon-favorite-filling"></span>
          <span class="iconfont icon-favorite"></span>
          <span class="iconfont icon-favorite"></span>
          `
        } else if ( item.score === 30 ) {
          str =` 
          <span class="iconfont icon-favorite-filling"></span>
          <span class="iconfont icon-favorite"></span>
          <span class="iconfont icon-favorite"></span>
          <span class="iconfont icon-favorite"></span>
          <span class="iconfont icon-favorite"></span>
          `
        }
        return `
          <div class="comment_block_user">
            <div class="user">
              <img src="${item.user.avatar_url?`${item.user.avatar_url}`:`./uploads/default-avatar.png`}" alt="">
            </div>
            <div class="tel">${item.user.nick_name}</div>
            <div class="star">
              ${str}
            </div>
            <div class="date">${item.create_time}</div>
          </div>
          <div class="comment_block_content">${item.content}</div>
          ${(item.images.length===0)?'':`
          <div class="comment_block_pic">
            ${item.images.map(ele=>` <img src="${ele.image_url}" alt="">`).join('')}
          </div>
          `}
        `
    }).join('')+`<div class="comment_more">亲, 没有更多了</div>`
  }
}
